import React, { Component } from 'react';
import Navbar from '../components/Navbar/Navbar';
import { mapState,mapDispatch } from  '../store/bindState'
class Common extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
            items:[
                {
                    title:'推荐',
                    path:'/'
                },
                {
                    title:'歌手',
                    path:'/singer'
                },
                {
                    title:'排行榜',
                    path:'/ranking'
                },
            ]    
        }
    }
    
    render() {
        return (
            <div>
                <Navbar items={this.state.items} {...this.props} ></Navbar>
                {this.props.children}
            </div>
        );
    }
    componentDidMount(){
        // 在页面显示前可以更改store中的state数据，返回按钮状态和导航标题
        this.props.changeTitle(this.props.meta.title);

        this.props.changeBack(this.props.meta.deep > 1 ? true : false);

        this.props.changeBarIndex(this.props.meta.index - 1);
        // 如果不是一级路由需要隐藏
        let show = this.props.meta.deep > 1 ? false :true ;
        this.props.changetabBarShow(show);
        // 对需要验证的路由进行处理
        if(this.props.meta.auth){
            if(Math.floor(Math.random() * 2 == 1)){
                this.props.history.replace('/login');
                this.props.changeBarIndex(2);
            }
        }
    }                                                                                                             
}

// mapDispatch像当前组件绑定操作方法。
export default mapDispatch(Common,[{type:"changeTitle",params:true},{type:"changeBack",params:true},{type:"changeBarIndex",params:true},{type:"changetabBarShow",params:true}]); 